<template>
    <view class="container">
        <u-search v-model="keyword" @custom="change"></u-search>
        <!-- 问题 推荐 -->
        <view class="list">
            <template v-for="(item, index) in recommend">
                <view class="list-item" @click="dtl(item)">
                    <rich-text :nodes="item.q"></rich-text>
                </view>
            </template>
            <view v-if="recommend.length > 0" class="o-text-center">
                <view class="icon close-btn" @click="hideResult">&#xe638;</view>
            </view>
        </view>
        <!-- 历史搜索 -->
        <view v-if="recommend.length == 0 && list.length > 0">
            <view class="title o-fbc">
                <text class="">历史搜索</text>
                <text class="icon o-font-color-error" @click="clear">&#xe696;</text>
            </view>
            <view class="history-list">
                <template v-for="(item, index) in list">
                    <view class="history-list-item" @click="setKeyword(item)">{{ item }}</view>
                </template>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useOrderStore } from '@/store'

const keyword = ref('')

const orderStore = useOrderStore()

const recommend = ref<Array<any>>([])

const list = computed(() => {
    return orderStore.list
})

const change = () => {
    let key = uni.$u.trim(keyword.value)
    if (!key) return
    uni.$u.$api.BaseApi.queryQestion({ key: keyword }).then((res: any) => {
        if (res.length == 0) {
            uni.$u.toast('没有查到相关问题,您可以直接询问客服!')
            return
        }
        res.forEach((m: any) => {
            let temp = m.question
            m.q = temp.replace(new RegExp(key, 'g'), `<span style="color:red;">${key}</span>`)
        })
        recommend.value = res
        orderStore.addServerList(key)
    })
}
const dtl = ({ id }: { id: string }) => {
    uni.$u.$MRouter.QA.to({ id })
}

const hideResult = () => {
    recommend.value = []
    keyword.value = ''
}

const clear = () => {
    uni.$u.$showModal({
        content: '是否确认删除搜索记录?',
        success: (res: any) => {
            if (res.confirm) orderStore.clearServerHistory()
        }
    })
}
const setKeyword = (item: any) => {
    keyword.value = item
    change()
}
</script>

<style scoped lang="scss">
.container {
    padding: 30rpx;
    background-color: white;
    height: calc(100vh - var(--status-bar-height) - 44px);
    .list {
        padding: 20rpx;
    }
    .list-item {
        line-height: 80rpx;
        font-size: 28rpx;
    }
    .title {
        font-weight: bold;
        font-size: 30rpx;
    }
    .history-list {
        display: flex;
        flex-wrap: wrap;
        padding: 20rpx;
    }
    .history-list-item {
        background: #f1f2f6;
        border-radius: 30px;
        padding: 8px 16px;
        margin-right: 30rpx;
    }
    .close-btn {
        font-size: 30px;
        transform: rotate(45deg);
        color: red;
        margin-top: 40rpx;
    }
}
</style>
